<template>
  <el-dialog :title="title" v-model="visible" width="800px" >
    <el-form
        ref="formRef" 
        :model="form"
        :rules="rules"
        label-width="120px"
    >
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="登录账号" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
            </el-col>
             <el-col :span="12">
                <el-form-item label="姓名" prop="realName">
                    <el-input type="textarea" v-model="form.realName"></el-input>
                </el-form-item>
            </el-col>
             <el-col :span="12">
                <el-form-item label="角色类型" prop="category">
                    <el-select v-model="form.category"  @change="handleRoleTypeChange" placeholder="请选择角色类型">
                        <el-option label="系统用户" value="system"></el-option>
                        <el-option label="非系统用户" value="non-system"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
             <el-col :span="12">
                <el-form-item label="角色名称" prop="roleName">
                    <el-input type="textarea" v-model="form.roleName"></el-input>
                </el-form-item>
            </el-col>
             <el-col :span="12">
                <el-form-item label="出生日期" prop="birthday">
                    <el-date-picker 
                        v-model="form.birthday"
                        type="datetime" 
                        placeholder="请选择出生日期"
                        style="width: 100%"
                    />
                </el-form-item>
            </el-col>
             <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                    <el-radio-group v-model="form.gender">
                        <el-radio :value="1">男</el-radio>
                        <el-radio :value="2">女</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
             <el-col :span="12">
                <el-form-item label="状态" prop="statu">
                    <el-radio-group v-model="form.statu">
                        <el-radio :value="3">正常</el-radio>
                        <el-radio :value="4">禁用</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="组织机构" prop="organization">
                    <el-select v-model="form.organization">
                        <el-option label="大学" value="university"></el-option>
                        <el-option label="中学" value="middle school"></el-option>
                        <el-option label="小学" value="primary school"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button @click="handleClose">取消</el-button>
        </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts"> 
import {ref, defineExpose} from 'vue'
import { ElMessage } from 'element-plus'
const title = ref("")
const formRef = ref<any>()
const visible = ref(false)
const currentType = ref<number>(1)
const props = defineProps({
  visible:Number
})

const form = ref({
  username: "",
  realName: "",
  category: "",
  roleName:"",
  birthday:null,
  gender: 1,
  statu: 3,
  phone:"",
  email:"",
  organization:""
})
const rules = {
  username:[{required:true,message:"请输入登录账号",trigger:['blur', 'change']},
    {
      pattern: /^[A-Za-z0-9`~!@#$%^&*()_\-+={}[\]|\\:;"'<>,.?/]*$/,
      message: '只能输入数字、英文和特殊字符，不能有空格',
      trigger: ['blur', 'change'],
    },
],
  realName:[{required:true,message:"请输入姓名",trigger:['blur', 'change']}],
  category: [{required:true,message:"请选择角色类型",trigger:['blur', 'change']}],
  roleName: [{required:true,message:"请输入角色名称",trigger:['blur', 'change']}],
  birthday: [{required:true,message:"请选择出生日期",trigger:['blur', 'change']}],
  gender:[{required:true,message:"请输入性别",trigger:"blur"}],
  statu:[{required:true,message:"请输入状态",trigger:"blur"}],
  phone: [{required:false,pattern: /^1[3-9]\d{9}$/,message: '请输入正确的手机号码',trigger: ['blur', 'change']}],
  email:[{required:false,type:"email",message:"请输入正确的邮箱",trigger:['blur','change']}],
  organization:[{required:false,message:"请输入组织机构",trigger:['blur','change']}]
}

const handleRoleTypeChange = () => {
  form.value.roleName = ""
}

const openDialog = (type: number = 1) => {
  currentType.value = type
  title.value = type === 1 ? '新增用户' : '编辑用户'
  visible.value = true
}

defineExpose({
  openDialog
})

const emits = defineEmits(["update:visible"]); 
const onSubmit = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      ElMessage.success("提交成功");
      emits("update:visible", 0); 
      visible.value = false;
    } else {
      ElMessage.error("请完善表单信息");
    }
  });
};
const handleClose = () => {
  formRef.value.resetFields(); 
  formRef.value.clearValidate(); 
  emits("update:visible", 0); 
  visible.value = false;
};

</script>

<style scoped>

</style>